<template>
  <div id="mouse-position"></div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from "vue";

import { Vmap } from "./Hooks/map.js";
onMounted(() => {
  const { proxy } = getCurrentInstance();
  const map = proxy.$map;
//   console.log(map);
  // 1. 视图跳转控件
  const ZoomToExtent = new ol.control.ZoomToExtent({
    extent: [110, 30, 115, 30],
  });
  map.addControl(ZoomToExtent);
  /* 放大和缩小 */
  const zoomslider = new ol.control.ZoomSlider();
  map.addControl(zoomslider);
  const scaleLineControl = new ol.control.ScaleLine({
    /* 设置比例尺单位,degrees,imperial,us,nautical,metric */
    units: "metric",
  });
  map.addControl(scaleLineControl);
  const mousePositionControl = new ol.control.MousePosition({
    /* 坐标格式 */
    coordinateFormat: ol.coordinate.createStringXY(4),
    projection: "EPSG:4326",
    /* 坐标信息显示样式类名,默认是'ol-mouse-position' */
    className: "custom-mouse-position",
    target: document.getElementById("mouse-position"),
    undefinedHTML: "&nbsp",
  });
  const overviewMapControl = new ol.control.OverviewMap({
    /* 鹰眼控件样式  */
    className: "ol-overviewmap ol-custom-overviewmap",
    layers: [Vmap],
    /* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
    collapseLabel: "\u00AB",
    /* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
    label: "\u00BB",
    /* 初始为展开显示方式 */
    collapsed: true,
    view: new ol.View({
      projection: "EPSG:4326",
    }),
  });
  map.addControl(mousePositionControl);
  map.addControl(overviewMapControl);
});
</script>

<style>
.ol-zoomslider {
  top: 7.5em !important;
  background-color: #0d5eff5f !important;
}
#mouse-position {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  width: 150px;
  height: 24.2px;
  background-color: rgba(0, 60, 136, 0.3);
  border-radius: 4px;
  padding: 2px;
  /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
  z-index: 2000;
}

/* 鼠标位置信息自定义样式设置 */
.custom-mouse-position {
  color: #eee;
  font-size: 14px;
  text-align: center;
  line-height: 24.2px;
  font-family: "微软雅黑";
}

/*=S 自定义鹰眼样式 */
.ol-custom-overviewmap {
  height: 300px;
  background-color: rgba(255, 255, 255, 0);
}

.ol-custom-overviewmap:hover {
  background-color: rgba(255, 255, 255, 0);
}

.ol-overviewmap-map {
  height: 300px !important;
}

/* 鹰眼控件展开时控件外框的样式 */
.ol-custom-overviewmap:not(.ol-collapsed) {
  border: 1px solid rgba(0, 0, 0, 0.4);
}

/* 鹰眼控件中地图容器样式 */
.ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
}

/* 鹰眼控件中显示当前窗口中主图区域的边框 */
.ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid #5581bb;
}

/* 鹰眼控件展开时其控件按钮图标的样式 */
.ol-custom-overviewmap:not(.ol-collapsed) button {
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
}
.ol-scale-line {
  left: 90%;
  transform: translateX(-50%);
}
</style>
